<template>
  <div class="app-container">
    <!--    {{title}}-->
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" :title="title+'开户'" @closed="createClose"
               :visible.sync="open" size="65%" append-to-body
    >
      <el-form v-loading="loading" ref="form" :model="form" :rules="rules" label-width="110px" class="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="店铺账户" prop="shopId">
              <el-select @change="$forceUpdate()" filterable v-model="form.shopId" placeholder="请选择店铺账户"clearable style="width: 240px">
                <el-option v-for="item in shopList" :key="item.id" :label="item.nickName" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费率" prop="feeRate">
              <el-input-number :step="0.1" :min="0" :max="15" :precision="2" v-model.number="form.feeRate" placeholder="请输入费率" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">资质信息</el-divider>
        <el-form-item label="商户类型" prop="merchantType">
          <el-select @change="handRegisterRoleChange"  v-model="form.merchantType" placeholder="请选择商户类型" clearable style="width: 240px" >
            <el-option label="企业" value="ENTERPRISE"/>
            <el-option label="个体户" value="INDIVIDUALBISS"/>
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照" prop="businessImage">
          <IncomingFileUpload :fileSize="2" api="/ecs/dinPay/upload" @input="handUploadImg" keys="businessImageId" :path="form.businessImageId" :limit="1" v-model="form.businessImage"></IncomingFileUpload>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="门头" prop="storeHeaderImg">
              <image-upload :limit="1" v-model="form.storeHeaderImg"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="场景照片" prop="storeIndoorImg">
              <image-upload :limit="1" v-model="form.storeIndoorImg"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="公司全称" prop="signedName">
              <name-input v-model="form.signedName" :maxlength="80" placeholder="请输入营业执照全称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户名称" prop="shopName">
              <name-input v-model="form.shopName" :maxlength="64" placeholder="请输入商户名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="商户简称" prop="merchantShowName">
              <name-input v-model="form.merchantShowName" :maxlength="16" placeholder="请输入商户简称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="社会统一信用代码" prop="certNo" label-width="140px">
              <el-input v-model="form.certNo" :maxlength="64" placeholder="请输入社会统一信用代码"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册资金" prop="regfund" >
              <el-input v-model="form.regfund" :maxlength="20" placeholder="请输入注册资金"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="经营类别" prop="categoryId" label-width="140px">
              <el-cascader show-all-levels   placeholder="请选择经营类别" :options="categoryIdOptions"  v-model="form.categoryId" @change="handleCategoryId"/>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-row>-->
<!--&lt;!&ndash;          <el-col :span="8">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-form-item label="经营类别" prop="businessCategory" label-width="140px">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-select v-model="form.businessCategory" placeholder="请选择经营类别" clearable style="width: 240px" >&ndash;&gt;-->
<!--&lt;!&ndash;                <el-option v-for="(item,index) in businessCategory" :label="item.name" :value="item.value" :key="index"/>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-select>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-col>&ndash;&gt;-->
<!--         -->
<!--        </el-row>-->

<!--        -->
        <el-form-item label="资质证件日期" required>
          <el-col :span="11">
            <el-form-item prop="certStartDate">
              <el-date-picker v-model="form.certStartDate" type="date" placeholder="请选择资质有效期起始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyyMMdd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1"  style="text-align: center" v-if="form.certIsLongTerm === 0">
            -
          </el-col>
          <el-col :span="10" v-if="form.certIsLongTerm === 0">
            <el-form-item prop="certEndDate">
              <el-date-picker v-model="form.certEndDate" type="date" placeholder="请选择资质有效期截止日期" format="yyyy 年 MM 月 dd 日" value-format="yyyyMMdd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-checkbox :true-label="1" :false-label="0" v-model="form.certIsLongTerm">长期</el-checkbox>
          </el-col>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="经营地址" prop="districtCode">
              <el-cascader v-model="form.districtCode" clearable :options="cityList" :props="{label:'name',value:'code'}" style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="经营详细地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入经营详细地址"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-divider content-position="left">法人信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证件正面（人像面）" prop="certFrontSide">
              <IncomingFileUpload :fileSize="2" api="/ecs/dinPay/upload" @input="handUploadImg" keys="certFrontSideId" :path="form.certFrontSideId" :limit="1" v-model="form.certFrontSide"></IncomingFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件背面（国徽面）" prop="certBackSide">
              <IncomingFileUpload :fileSize="2" api="/ecs/dinPay/upload" @input="handUploadImg" keys="certBackSideId" :path="form.certBackSideId" :limit="1" v-model="form.certBackSide"></IncomingFileUpload>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="8">
            <el-form-item label="法人名字" prop="legalPerson">
              <el-input v-model="form.legalPerson" placeholder="请输入法人名字"/>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="联系人邮箱" prop="contactEmail">
              <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="法人证件号" prop="legalPersonId">
              <el-input v-model="form.legalPersonId" placeholder="请输入法人证件号"/>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="居住地址" prop="legalPersonIdAddress">
              <el-input v-model="form.legalPersonIdAddress" placeholder="请输入居住地址"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="法人证件日期" required>
          <el-col :span="11">
            <el-form-item prop="idCardStartDate">
              <el-date-picker v-model="form.idCardStartDate" type="date" placeholder="请选择法人证件有效期起始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyyMMdd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1"  style="text-align: center" v-if="form.idCardIsLongTerm === 0">
            -
          </el-col>
          <el-col :span="10" v-if="form.idCardIsLongTerm === 0">
            <el-form-item prop="idCardEndDate">
              <el-date-picker v-model="form.idCardEndDate" type="date" placeholder="请选择法人证件有效期截止日期" format="yyyy 年 MM 月 dd 日" value-format="yyyyMMdd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-checkbox :true-label="1" :false-label="0" v-model="form.idCardIsLongTerm">长期</el-checkbox>
          </el-col>
        </el-form-item>

        <el-divider content-position="left">银行信息</el-divider>

        <el-form-item label="结算类型" prop="accountType">
          <el-select  v-model="form.accountType" placeholder="请选择结算类型" clearable style="width: 240px" >
            <el-option label="对公" value="TOPUBLIC"/>
            <el-option v-if="!form.merchantType || form.merchantType === 'INDIVIDUALBISS'" label="对私" value="TOPRIVATE"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if=" form.merchantType === 'ENTERPRISE'" label="开户许可证" prop="accountImg">
          <image-upload :limit="1" v-model="form.accountImg"/>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="开户名称" prop="accountName">
              <el-input v-model="form.accountName" :maxlength="80" placeholder="请输入开户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行账号" prop="accountNo">
              <el-input v-model="form.accountNo" :maxlength="50" placeholder="请输入银行账号" />
            </el-form-item>
          </el-col>
          <el-col :span="7" >
            <el-form-item label="联行号" prop="bankNo">
              <el-input v-model="form.bankNo" :maxlength="80" placeholder="请输入联行号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="手机号" prop="phone">
              <el-tooltip class="item" effect="dark" content="必须为银行账户预留手机号" placement="top-start">
                <el-input v-model="form.phone" placeholder="请输入银行账户预留手机号"/>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <template v-if="form.merchantType==='INDIVIDUALBISS' && form.accountType==='TOPRIVATE'">
            <el-col :span="2">
              <el-button @click="handleSendCode"  :disabled="countdown > 0">{{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}</el-button>
            </el-col>
            <el-col :span="8">
              <el-form-item label="验证码" prop="smsCode">
                <el-input v-model="form.smsCode" placeholder="请输入验证码"/>
              </el-form-item>
            </el-col>
          </template>

        </el-row>

        <el-divider content-position="left">其他信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="平台店铺截图" prop="shopScreenshot">
              <IncomingFileUpload :fileSize="2" api="/ecs/dinPay/upload" @input="handUploadImg" keys="shopScreenshotId" :path="form.shopScreenshotId" :limit="1" v-model="form.shopScreenshot"></IncomingFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="近三个月提现流水截图" prop="threeMonthTransaction">
              <IncomingFileUpload :fileSize="2" api="/ecs/dinPay/upload" @input="handUploadImg" keys="threeMonthTransactionId" :path="form.threeMonthTransactionId" :limit="1" v-model="form.threeMonthTransaction"></IncomingFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="历史银行提现到账截图" prop="historyBankWithdraw">
              <IncomingFileUpload :fileSize="2" api="/ecs/dinPay/upload" @input="handUploadImg" keys="historyBankWithdrawId" :path="form.historyBankWithdrawId" :limit="1" v-model="form.historyBankWithdraw"></IncomingFileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="支付密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入支付密码"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="footer-operation">
        <el-button @click="initialization();open = false">返回</el-button>
        <el-button :loading="loading" type="success" @click="submitForm">保存草稿</el-button>
        <el-button :loading="loading" type="primary" v-hasPermi="['ecs:dinPay:incoming']" v-if="!form.registerStatus  || form.registerStatus === 0 || form.registerStatus === 1" @click="submit">提交</el-button>
        <el-button :loading="loading" type="primary" v-hasPermi="['ecs:dinPay:incoming']" v-else-if="form.settledStatus===2 || form.settledStatus==4" @click="handRegistered">提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 图片上传组件
import IncomingFileUpload from '@/components/IncomingFileUpload'
import { listShop } from '@/api/ecs/shop'
import { addDinPay, getDinPay, updateDinPay, incoming, smsCodeApi, registered } from '@/api/ecs/dinPay'
import { listDinPayCity } from '@/api/ecs/dinPayCity'

export default {
  name: 'dinPayOperate',
  props: {
    opens: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '智付锡商银行'
    },
    formData: {
      type: Object,
      default: {}
    }
  },
  components: {
    IncomingFileUpload
  },
  data() {
    return {
      open: false,
      form: {},
      countdown:0,
      cityList:[],

      categoryIdOptions:[
        {label:"餐饮食品",value:"FOOD_BEVERAGE",
          children:[
            {label:"保健品/滋补品",value:133},
            {label:"餐饮",value:135},
            {label:"普通食品",value:132}
          ]
        },{label:"电商团购",value:"GROUP_PURCHASE",
          children:[
            {label:"海淘",value:392},
            {label:"团购",value:391},
            {label:"线上商超",value:393}
          ]
        },{label:"网络虚拟服务",value:"NETWORK_VIRTUAL_SERVICE",
          children:[
            {label:"游戏、在线音视频等虚拟业务",value:260}
          ]
        },{label:"生活缴费",value:"LIVING_PAYMENT",
          children:[
            {label:"城市交通卡缴费",value:357},
            {label:"其他生活缴费",value:358},
            {label:"停车场",value:355},
            {label:"物业管理费",value:356},
            {label:"有线电视缴费",value:354},
          ]
        },{label:"软件",value:"SOFTWARE",
          children:[
            {label:"软件",value:270}
          ]
        },{label:"线下零售",value:"OFFLINE_RETAIL",
          children:[
            {label:"百货",value:384},
            {label:"服饰鞋包、美妆日化、健身运动服务",value:390},
            {label:"便利店",value:382},
            {label:"超市",value:381},
            {label:"其他综合零售",value:385},
            {label:"自动贩卖机",value:383},
          ]
        },{label:"时尚",value:"FASHION",
          children:[
            {label:"服饰类商城/服饰配件/箱包",value:121},
            {label:"户外/运动/健身器材/安防",value:123},
            {label:"黄金珠宝/钻石/玉石",value:126},
            {label:"乐器",value:"124"},
            {label:"礼品/鲜花/纪念品",value:122},
            {label:"工艺品/盆栽/室内装饰品",value:127},
            {label:"手表/钟表/眼镜",value:125}
          ]
        },{label:"娱乐/健身服务",value:"ENTERTAINMENT_FITNESS_SERVICES",
          children:[
            {label:"保健及美容SPA",value:749},
            {label:"会员俱乐部（体育、娱乐、运动等）、乡村俱乐部以及私人高尔夫课程班",value:750},
            {label:"商业体育场馆、职业体育俱乐部、运动场和体育推广公司",value:751},
            {label:"公共高尔夫球场",value:752},
            {label:"歌舞厅",value:753},
            {label:"美容理发店",value:754},
            {label:"俱乐部/高尔夫球场/休闲会所",value:342},
            {label:"美容/健身类会所",value:341},
            {label:"娱乐/游艺厅/KTV/网吧/",value:343},
            {label:"娱乐/健身服务-美容/健身类会所",value:346},
          ]
        }
      ],
    //
    //
    //

    rules: {
        shopId: [
          { required: true, message: '请选择店铺', trigger: 'change' }
        ],
        feeRate: [
          { required: true, message: '费率不能为空', trigger: 'blur' }
        ],
        signedName: [
          { required: true, message: '公司全称不能为空', trigger: 'blur' }
        ],
        shopName:[
          { required: true, message: '商户名称不能为空', trigger: 'blur' },
          { max: 64, message: '商户名称最大64字符', trigger: 'blur' }
        ],
        merchantShowName: [
          { required: true, message: '商户简称不能为空', trigger: 'blur' },
          { max: 16, message: '商户简称最大16字符', trigger: 'blur' }
        ],
        merchantType: [
          { required: true, message: '请选择商户类型', trigger: 'change' }
        ],
        certNo: [
          { required: true, message: '证件号不能为空', trigger: 'blur' }
        ],
        regfund:[
          { required: true, message: '注册资金不能为空', trigger: 'blur' }
        ],
        businessCategory:[
          { required: true, message: '请选择经营类别', trigger: 'change' }
        ],
        categoryId:[
          { required: true, message: '请选择经营子类', trigger: 'change' }
        ],
        address: [
          { required: true, message: '营业执照注册地址不能为空', trigger: 'blur' }
        ],
        certStartDate: [
          { required: true, message: '请选择资质有效期起始日期', trigger: 'change' }
        ],
        certEndDate: [
          { required: true, message: '请选择资质有效期截止日期', trigger: 'change' }
        ],
        businessImageId: [
          { required: true, message: '企业证件图片不能为空', trigger: 'blur' }
        ],
        businessImage: [
          { required: true, message: '企业证件图片不能为空', trigger: 'blur' }
        ],
        storeHeaderImg:[
          { required: true, message: '门头照不能为空', trigger: 'change' }
        ],
        storeIndoorImg:[
          { required: true, message: '场景照片不能为空', trigger: 'change' }
        ],
        accountImg:[
          { required: true, message: '开户许可证不能为空', trigger: 'change' }
        ],
        legalPerson: [
          { required: true, message: '法人姓名不能为空', trigger: 'blur' }
        ],
        legalPersonId: [
          { required: true, message: '法人证件号不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dXx]$/, message: '法人身份号格式不正确', trigger: 'blur' }

        ],
        idCardStartDate: [
          { required: true, message: '请选择法人证件有效期起始日期', trigger: 'blur' }
        ],
        idCardEndDate: [
          { required: true, message: '请选择法人证件有效期截止日期', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '银行账户预留手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '法人手机号格式不正确', trigger: 'blur' }
        ],
        certFrontSide: [
          { required: true, message: '请上传法人身份证件正面照片', trigger: 'change' }
        ],
        certBackSide: [
          { required: true, message: '请上传法人身份证件背面照片', trigger: 'change' }
        ],

        contactEmail: [
          { required: true, message: '联系人邮箱地址不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],

        password: [
          { required: true, message: '支付密码不能为空', trigger: 'blur' }
        ],
        accountName: [
          { required: true, message: '开户名称不能为空', trigger: 'blur' }
        ],
        accountNo: [
          { required: true, message: '银行账号不能为空', trigger: 'blur' }
        ],
        accountType: [
          { required: true, message: '请选择结算类型', trigger: 'change' }
        ],
        bankNo: [
          { required: true, message: '联行号不能为空', trigger: 'blur' }
        ],
        smsCode: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ],
        shopScreenshot: [
          { required: true, message: '请上传平台店铺截图', trigger: 'change' }
        ],
        threeMonthTransaction: [
          { required: true, message: '请上传近三个月提现流水截图', trigger: 'change' }
        ],
        historyBankWithdraw:[
          { required: true, message: '请上传历史银行提现到账截图', trigger: 'change' }
        ],
        districtCode:[
          { required: true, message: '请选择经营地址', trigger: 'change' }
        ],
        legalPersonIdAddress:[
          { required: true, message: '请输入法人证件居住地址', trigger: 'blur' }
        ],
      },
      isRefresh: false,
      shopList: [],
      loading: false
    }
  },
  created() {
    this.initialization()
    listDinPayCity().then(response=>{
      this.cityList = this.handleTree(response.data, "code", "parentCode");
    })
  },
  methods: {
    initialization() {
      this.form = {
        id: null,
        feeRate:0,
        smsCode:null,
        otherPdInfo:null,
        webSite:null,
        productId:null,
        requestNo: null,
        dinUserId: null,
        parentMerchantNo: null,
        subMerchantNo: null,
        signedName: null,
        merchantShowName: null,
        merchantType: null,
        shopScreenshotId: null,
        shopScreenshot: null,
        threeMonthTransactionId: null,
        threeMonthTransaction: null,
        historyBankWithdrawId:null,
        historyBankWithdraw:null,
        certNo: null,
        address: null,
        certStartDate: null,
        certEndDate: null,
        certIsLongTerm:0,
        businessImageId: null,
        businessImage: null,
        storeHeaderImg:null,
        storeIndoorImg:null,
        legalPerson: null,
        legalPersonId: null,
        idType: null,
        idCardStartDate: null,
        idCardEndDate: null,
        idCardIsLongTerm:0,
        phone: null,
        certFrontSideId: null,
        certFrontSide: null,
        certBackSideId: null,
        certBackSide: null,
        contact: null,
        contactId: null,
        contactIdType: null,
        contactIdCardStartDate: null,
        contactIdCardEndDate: null,
        contactPhone: null,
        contactEmail: null,
        contactFrontId: null,
        contactFront: null,
        contactBackId: null,
        contactBack: null,
        password: null,
        accountImg:null,
        accountName: null,
        accountNo: null,
        accountType: null,
        bankNo: null,
        createTime: null,
        updateTime: null,
        delFlag: null,
        status: null,
        agentId: null,
        childAgentId: null,
        shopId: null,
        platformId: null,
        districtCode:null,
        categoryId:null,
        businessCategory:null,
        legalPersonIdAddress:null,
      }
    },
    handUploadImg(val1,val2,val3){
      this.form[val2] = val3
    },
    handRegisterRoleChange(val){
      if (val === "ENTERPRISE"){
        this.$set(this.form, 'accountType',"TOPUBLIC"); //正确赋值
      }else if(val === "INDIVIDUALBISS"){
        this.$set(this.form, 'accountType',null); //正确赋值
      }
    },
    submitForm() {
      this.form.productId = 6
      if (this.form.categoryId){
        if (this.form.categoryId.length === 2){
          this.form.categoryId = this.form.categoryId[1]
        }
      }
      if (this.form.districtCode){
        if (this.form.districtCode.length === 3){
          this.form.districtCode = this.form.districtCode[2]
        }
      }
      this.loading = true
      if (this.form.id != null) {
        updateDinPay(this.form).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.isRefresh = true
            this.createClose()
          } else {
            this.loading = false
          }
        }).catch(() => {
          this.loading = false
        })
      } else {
        addDinPay(this.form).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess('新增成功')
            this.open = false
            this.isRefresh = true
            this.createClose()
          } else {
            this.loading = false
          }
        }).catch(() => {
          this.loading = false
        })
      }
    },
    handleSendCode() {
      // 验证手机号
      this.$refs["form"].validateField("phone", async () => {
        try {
          // 调用发送验证码接口
          const response = await smsCodeApi({ phone: this.form.phone });
          console.log("验证码发送成功", response);

          // 开启倒计时
          this.startCountdown();
        } catch (error) {
          console.error("发送验证码失败", error);
        }
      });
    },
    // 开始倒计时
    startCountdown() {
      this.countdown = 60; // 设置倒计时时间（秒）
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else {
          clearInterval(this.timer); // 倒计时结束清除定时器
          this.timer = null;
        }
      }, 1000);
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.categoryId){
            if (this.form.categoryId.length === 2){
              this.form.categoryId = this.form.categoryId[1]
            }
          }
          if (this.form.districtCode){
            if (this.form.districtCode.length === 3){
              this.form.districtCode = this.form.districtCode[2]
            }
          }
          this.loading = true
          this.form.productId = 6
          incoming(this.form).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess('提交成功')
              this.open = false
              this.isRefresh = true
              this.createClose()
            } else {
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    handRegistered(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.categoryId){
            if (this.form.categoryId.length === 2){
              this.form.categoryId = this.form.categoryId[1]
            }
          }
          if (this.form.districtCode){
            if (this.form.districtCode.length === 3){
              this.form.districtCode = this.form.districtCode[2]
            }
          }
          this.loading = true;
          updateDinPay(this.form).then(response => {
            if (response.code === 200) {
              registered({ id:  this.form.id }).then(res => {
                this.loading = false
                if (res.code === 200) {
                  this.query()
                  this.$modal.msgSuccess('提交成功')
                }
              })
            }
          })

        }
      })
    },
    query() {
      this.loading = true
      getDinPay(this.form.id).then(res => {
        if (res.code === 200) {
          this.form = res.data
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    createClose() {
      this.initialization()
      this.open = false
      this.$emit('close', false, this.isRefresh)
    },
    handleCategoryId(e){
      // console.log(e)
      this.form.businessCategory = e[0]
      this.form.categoryId = e[1]
    }
  },
  watch: {
    opens: {
      handler(val) {
        this.open = val
        this.initialization()
        listShop({ page: 1, pageSize: 100000 }).then(res => {
          this.shopList = res.rows
        })

      },
      deep: true,
      immediate: true
    },
    formData: {
      handler(val) {
        this.form = val
        if (val.id){
          this.query()
        }
      },
      // deep:true,
      immediate: true
    },
    title: {
      //   handle(val){
      //   },
      //   deep:true,
      //   immediate:true,
    }
  }
}
</script>


<style scoped lang="scss">
::v-deep .el-drawer__header {
  font-weight: 900;
  font-size: 18px;
}

.certificateContacts {
  padding: 0 20px;
}

::v-deep .el-date-editor.el-input {
  width: 100%;
}

::v-deep .el-checkbox__label {
  padding-left: 4px;
}

.form {
  padding-bottom: 80px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
